<template>
    <div class="msg" ref="msg" :class="{active:msgStatus}">
        <div class="msg-wapper">
            {{text}}
        </div>
    </div>
</template>
<script>
export default {
    // 这个name 不能随便起，就是相当于我们用的 el-button,是插件中唯一的
    name:"vue-msg",
    data(){
        return{
            msgStatus:false,
            text:''
        }
    },
    methods: {
         msgPlugin(text,time = 2000){
            this.text = text;
            this.msgStatus = true;

            setTimeout(()=>{
                this.msgStatus = false;
            },time)
         }
    },
}
</script>
<style scoped>
    .msg{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 0;
        min-height: 0;
        text-align: center;
        background: rgba(0, 0, 0, .5);
        border-radius: 5px;
        color: #fff;
        transition: all .5s;
        z-index: -1;
        opacity: 0;
    }
    .msg.active{
        width: 150px;
        min-height: 25px;
        opacity: 1;
        z-index: 11;
    }
</style>